<template>
  <div class="left-list">
    <div class="left-list-img">
      <img
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      />
    </div>
    <div class="left-list-bottom">
      <div class="user-name">NAME:jsonpla</div>
      <div class="user-com">歌曲数:11</div>
      <div class="user-com">播放数: 88</div>
      <div class="user-com">粉丝数: 88</div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    const imgList = ref([
      "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=0&spn=0&di=84260&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1719063513%2C2559625643&os=3428769622%2C502085381&simid=3425131725%2C175063916&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg%26refer%3Dhttp%3A%2F%2Ffile02.16sucai.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1640654049%26t%3D56d488981595f9ef2f3bb6be5a0c37c5&fromurl=ippr_z2C%24qAzdH3FAzdH3F8mf7vwt_z%26e3Bv54AzdH3Fda89AzdH3FabAzdH3F900d9_z%26e3Bip4s&gsm=1&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDIsNSw3LDgsOQ%3D%3D",
      "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=2&spn=0&di=226050&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3666548066%2C2508071679&os=781744667%2C2836669055&simid=3666548066%2C2508071679&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg%26refer%3Dhttp%3A%2F%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1640654049%26t%3D95f850747c0c6969e4de90db5c1e59df&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3F15ogs5w1AzdH3Fcnmd9-dl8b8c&gsm=1&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDIsNSw3LDgsOQ%3D%3D",
    ]);
    const router = useRouter();
    const showNext = () => {
      router.push("/");
    };
    return {
      imgList,
      showNext,
    };
  },
};
</script>

<style scoped>
.left-list{
  display: flex;
  height:90px;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.left-list-img{
  width: 60px;
  height:60px;
}
.left-list-img img{
  width: 100%;
  height:100%;
}
.left-list-bottom{
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  text-align: left;
  padding-left: 12px;
}
.user-name{
  font-weight: bold;
}
.user-com{
  font-size: 12px;
}
</style>
